<!DOCTYPE html>
<meta charset="utf-8">
<style>
* {
    padding: 0;
    margin: 0;
}


svg {
    background-color: #c00;
    background-image: -webkit-linear-gradient(top, #e6f3fb, #a2cde8);
    background-image: linear-gradient(top, #e6f3fb, #a2cde8);
}

circle {
    r: 2; fill: rgba(255, 255, 0, 0.9);
}
rect {
    fill: rgba(255, 255, 0, 0);
}


#new_flashcontent {
    position: relative;
    width: 100%; height: 100%;
}

/*侧边面板*/
.panel {position: absolute; width: 210px; z-index: 2; left: 0px; top: 50%; transform: translate(-210px,-50%); -webkit-transform: translate(-210px,-50%); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.panel.active {
    transform: translate(0px,-50%);
    -webkit-transform: translate(0px,-50%);
}

.panel .tit {
    background: #1a81fc;
    background-image: -webkit-linear-gradient(top, #5ba0ff, #1078fa);background-image: linear-gradient(top, #5ba0ff, #1078fa);
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 5px 0; border-radius: 0 10px 0 0;
}

.panel .con {
    background: #fff;border-radius:0 0px 10px 0;border: 1px #1a81fc solid;overflow: hidden;
}
.panel ul{padding: 10px; padding-bottom: 0;}
.panel li {
    display: inline-block;
    width: 90px;
    height: 52px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 3px;
}

.panel li img {
    width: 30px;
    margin: 0 auto
}

.panel li h2 {
    font-size: 10px;
    text-align: center;
    font-weight: normal;
}

.panel .cfs{ background: #e5ffff; padding:10px 15px 5px;}
.panel .cf1 { height: 15px; margin-bottom: 10px; font-size: 12px;color: #000;padding-left: 10px;border-left: 100px #33ffe5 solid ; }
.panel .cf2 { height: 15px; margin-bottom: 10px; font-size: 12px;color: #000;padding-left: 10px;border-left: 100px #7fff00 solid ; }

.panel h4 {display: none;}

.panel .side {position: absolute; width: 18px; text-align: center; padding: 15px 5px; height: auto; background: #1a81fc; background-image: -webkit-linear-gradient(left, #5ba0ff, #1078fa);background-image: linear-gradient(left, #5ba0ff, #1078fa); font-size: 12px; line-height: 140%; color: #fff; top: 40%; right: -28px; z-index: 3; border-radius: 0 10px 10px 0; cursor: pointer; }

/*弹窗*/
.pop {display: none; position: absolute;z-index: 3; left: 50%; top: 50%; width: 600px; height: 400px; transform: translate(-50%,-50%); background-color: #dff4ff; color: #fff; font-size: 20px; border: 1px #1a81fc solid; border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0 0 10px #00334b; box-shadow: 0 0 10px #00334b; }
.pop .tit{font-size: 16px; height: 30px; line-height: 30px; color: #fff; text-align: center; padding: 5px 0; background-color: #1a81fc; background-image: -webkit-linear-gradient(top, #5ba0ff, #1078fa);background-image: linear-gradient(top, #5ba0ff, #1078fa); }
.pop .picture{position: absolute; left: 20px; top: 60px; width: 30%;  height: 170px; overflow: hidden;}
.pop .picture img{width: 100%;}
.pop .con{position: absolute; left: 220px; top: 60px; width: 360px; height: 320px; overflow: auto; padding-right: 10px;}

.pop h2{font-size: 16px; color: #1a81fc; margin-bottom: 5px;}
.pop .txt{background:#fff; color: #666;font-size: 12px; padding: 10px; margin-bottom: 10px; line-height: 180%;}
.pop i {position: absolute; width: 29px; height: 29px; background: url(images/close.png)  -0px -0px no-repeat; right: 10px; top: 5px; font-size: 30px; }

.arr {
    width: 80px;    position: absolute;    bottom: 30px;    left: 20px;}

.tip {
    font-size: 10px;    color: #666;    position: absolute;    top: 20px;    right: 20px;}

.tip i {
    color: #900;    font-style: normal;    margin: 0 5px;}

    .con1{padding: 30px; border: 1px #f00 solid;}
    .box1{width: 1200px; height: 600px;overflow: hidden; background: #e2e;}
    .fullscreen{position: absolute; left:0; top:0;}
    .btn{width: 190px; padding:10px 20px; background: #0f0; position: absolute; left: 10px; bottom: 10px; z-index: 3; text-align: center; }
</style>

<body>
    
    <div class="con1">
        <div class="box1">
            <div id="new_flashcontent">
                <div class="pop" >
                    <div class="tit"></div>
                    <i></i>
                    <div class="picture"></div>
                    <div class="con">
                        <h2>名词解释</h2>
                        <div class="txt Nounsexplain"></div>
                        <h2>区域</h2>
                        <div class="txt Area"></div>
                        <h2>注意事项</h2>
                        <div class="txt Note"></div>
                    </div>
                </div>
        
                <div class="panel">
                    <div class="tit">机场服务设施介绍</div>
                    <div class="con">
                        <ul class="sort"></ul>
                        <div class="cfs">
                            <div class="cf cf1">国内出发</div>
                            <div class="cf cf2">国际出发</div>
                        </div>
                    </div>
                    <div class="side">服务介绍</div>
                </div>
        
                <div class="tip">左侧图例可点击/ 位置点也可以点击/ 鼠标滚轮放大缩小 / 可拖动 / 当前缩放比例为<i>1</i>倍</div>
                <img src="images/arr.png" class="arr">
            </div>
        </div>
    </div>
    <div class="btn">切换全屏</div>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/d3.v3.min.js"></script>
    <script src="js/TweenMax.min.js"></script>
    <script>
    var margin = {
            left: 0,
            top: 0,
            right: 10,
            bottom: 10
        },
        width = $("#new_flashcontent").parent().width(),
        height = $("#new_flashcontent").parent().height(),

        bg_width = 2105,
        bg_height = 1005,
        ratio_init = width / bg_width;


    

    var zoom = d3.behavior.zoom()
        .scaleExtent([ratio_init, 3])
        .on("zoom", zoomed);

    var drag = d3.behavior.drag()
        .origin(function(d) {
            return d;
        })
        .on("dragstart", dragstarted)
        .on("drag", dragged)
        .on("dragend", dragended);

    var _svg = d3.select("#new_flashcontent").append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(zoom)
         ;


    // 总容器
    var container = _svg.append("g");
    container
        .attr("class", "all")
        .append("image")
        .attr("xlink:href", "images/bg.png")
        .attr("x", "0")
        .attr("y", "0")
        .attr("width", bg_width)
        .attr("height", bg_height)
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")scale(" + ratio_init + ")")
        
        ;

    // 类别
    var arrSort = [
        { "textTitle":"医疗急救站",
        "Nounsexplain":" 医疗急救站有3间.用于突发病情的旅客急救",
        "Area":"T2航站楼始发候机厅A岛、始发候机厅C岛远机位、到达内厅三号转盘后",
        "Note":"1、您现在点击的位置处于T2航站楼始发候机厅A岛<br /> 2、提供24小时医疗急救服务<br /> 3、24小时医疗急救电话：0731-84797120" 
        },

        { "textTitle":"磁悬浮",
        "Nounsexplain":"机场站位于长沙黄花国际机场T1、T2航站楼之间，总建筑面积9310平方米,全线设长沙火车南站、 梨站和黄花机场站三个站，并预留有两个车站。全线设计时速100公里/小时，最小行车间隔3分钟,这是我国首条投入运营的中低速磁浮线。",
        "Area":"" ,
        "Note":""
        },

        { "textTitle":"饮水机",
        "Nounsexplain":"饮水机提供有20台，可供温水、开水，配有语音提示功能及盲文。设置高度也方便轮椅旅客使用。",
        "Area":"分布在到达外厅两端、始发候机厅A、B、C岛及A、C远机位，到达厅两端、国际内厅、到达夹层。" ,
        "Note":"1、您现在点击的位置处于A岛候机厅北侧。<br /> 2、候机楼内保证24小时供应饮用水，免费提供一次性饮水纸袋。<br /> 3、供应的饮用水和一次性饮具符合国家卫生标准"
        },

        { "textTitle":"问询台" ,
        "Nounsexplain":"    如果您有关于机场服务的问题，请到旅客问讯台向工作人员咨询。这里将为您提供航班信息咨询、乘机流程咨询和相关乘机知识咨询等服务，以及提供复印、传真等商务服务。" ,
        "Area":"T2航站楼始发厅A、B、C、D值机岛西侧（其中A值机岛西侧为南方航空问询专用）、始发隔离区B岛,A为南航航班专用柜台。" ,
        "Note":"1、您现在点击的位置处于A值机岛西侧（南航专用）。 <br /> 2、黄花国际机场自动问讯电话：0731-96777　　       南方航空湖南分公司问讯电话：0731-84799333"
        },

        { "textTitle":"母婴室" ,
        "Nounsexplain":"母婴室有12间,提供带小孩旅客使用。" ,
        "Area":"始发大厅两端、始发候机厅A、B、C岛、到达外厅、国际到达厅、到达内厅两端、A岛远机位、C岛远机位。" ,
        "Note":"1、您现在点击的位置处于A岛候机厅南侧。<br /> 2、请家长一定要注意不要将宝宝交给陌生人，不要将宝宝留在母婴室里，一定要时刻有家人陪伴，以免发生意外。" 
        },

        { "textTitle":"手推车" ,
        "Nounsexplain":"手推车数量有1600台，旅客可自行拿取手推车运载行李。" ,
        "Area":"始发厅外高架边侧、始发候机厅A、B、C连廊通道、国际到达厅、国内到达厅、夹层。" ,
        "Note":"1、您现在点击的位置处于A-B岛连廊。<br /> 2、仅供旅客运载行李及随身物品所用，禁止搭乘婴幼儿及儿童。<br /> 3、请家长请照看好自己的小孩，勿用手推车嬉戏、追赶，以免发生意外。" 
        },



        { "textTitle":"残障旅客卫生间" ,
        "Nounsexplain":"残疾旅客卫生间共有13间，设有盲文、语音提示装置，供盲人旅客、轮椅旅客使用。" ,
        "Area":"始发大厅两端、始发候机厅A、B、C岛、到达外厅两端、, 国际到达厅、达到内厅两端、负一层。" ,
        "Note":"1、您现在点击的位置处于A岛候机厅北侧。<br /> 2、卫生间内禁止吸烟。<br /> 3、请共同爱护环境卫生及设施。" 
        },

        { "textTitle":"卫生间" ,
        "Nounsexplain":"公共区域男女卫生间共23间" ,
        "Area":"始发大厅两端、始发候机厅A、B、C岛、到达外厅两端、国际到达厅、到达内厅两端、A岛远机位、C岛远机位、到达夹层、负一层。" ,
        "Note":"1、您现在点击的位置处于A岛候机厅北侧。 <br />2、卫生间内禁止吸烟。<br /> 3、请共同爱护环境卫生及设施。"
        },

        { "textTitle":"吸烟室" ,
        "Nounsexplain":"航站楼吸烟室共有6间区域：分别分布在隔离区候机厅A岛南北两侧、B岛北侧、C岛远机位、国际中转候机厅及国内C楼候机厅。 " ,
        "Area":"分别分布在隔离区候机厅A岛南北两侧、B岛北侧、C岛远机位、国际中转候机厅及国内C楼候机厅。 " ,
        "Note":"1、您现在点击的位置处于隔离区候机厅B岛北侧。 <br />2、旅客及工作人员禁止在吸烟室以外的公共区域内吸烟。"
        },

        { "textTitle":"电子办票" ,
        "Nounsexplain":"无行李旅客凭身份证原件可自行领取登机牌" ,
        "Area":"始发大厅A、B、C值机岛西侧，其中A值机岛仅为南航航班专用" ,
        "Note":"1、您现在点击的位置处于A值机岛西侧。（南航专用）<br /> 2、办理需自备身份证件，座位可自选或机选。航班起飞前40分钟停止自助办理。<br /> 3、儿童及婴幼儿需在柜台办理。<br /> 4、如有问题请至值机柜台询问办理。" 
        },

        { "textTitle":"公用电话" ,
        "Nounsexplain":"可免费拨打市内电话3分钟，免费上网，查看即时股票行情，并设置游戏功能。" ,
        "Area":"分布在始发大厅入口两端、始发候机厅A、B、C岛、A岛远机位、C岛远机位、BC连廊通道。" ,
        "Note":"1、您现在点击的位置处于A岛候机厅北侧。<br /> 2、公用电话可使用IC卡。<br /> 3、请共同爱护公共设施。<br /> 4、设有轮椅旅客专用电话。"
        },

        { "textTitle":"厦航VIP贵宾厅" ,
        "Nounsexplain":"为乘坐厦门航空头等舱、公务舱及厦航金卡、银卡旅客提供贵宾服务" ,
        "Area":"您现在所点击的位置处于A岛候机厅旁。" ,
        "Note":"厦门航空专用，暂时还未开放。"
        },

        { "textTitle":"商务贵宾厅" ,
        "Nounsexplain":"在T2航站楼设有商务贵宾厅，您可以享受到专人代办值机手续、专用安检通道、专人送机和舒适的休息场地等一系列尊贵服务。" ,
        "Area":"T2航站楼始发厅1号入口北侧、7-15号安检后、A候机厅、A-B连廊、A、C远机位候机厅、国际候机厅。" ,
        "Note":"一、您现在点击的位置处于A岛候机厅北侧。<br /> 二、商务贵宾服务所对应的客户。<br /> 1、商务贵宾：<br /> 持有本公司个人专属卡的贵宾客户；<br /> 本公司冠名企业的贵宾卡客户以及战略合作企业指定的贵宾卡客户；<br /> 本公司合作企业的贵宾次卡使用贵宾客户。<br /> 乐翔会员贵宾卡客户。<br /> 2、F/C舱贵宾：<br /> 头等舱及公务舱旅客、航空公司贵宾卡客户<br /> 详情可咨询服务电话0731-84797606"
        },

        { "textTitle":"公用电梯" ,
        "Nounsexplain":"公用电梯有11台,方便旅客上下候机楼每一楼层，并设有盲文且按键装置高度适合轮椅残障旅客使用。" ,
        "Area":"始发大厅B、C值机岛前、始发候机A、B、C岛，国内、国际到达夹层。" ,
        "Note":"1、您现在点击的位置处于始发大厅中。<br /> 2、请勿超载，电梯内禁止吸烟。<br /> 3、禁止小孩在电梯口玩耍、追赶，小孩应有大人带领乘坐电梯。<br /> 4、请爱护公共设施。"
        },

        { "textTitle":"超大行李托运" ,
        "Nounsexplain":"超过航空公司规定的托运行李重量及尺寸可在超大行李托运处办理相关手续" ,
        "Area":"始发大厅北侧（国内航班）、始发大厅南侧（国际航班）。" ,
        "Note":"1、您现在点击的位置处于始发大厅北侧（国内航班）。<br /> 2、国际航班起飞前40分钟、国内航班起飞前30分钟停止办理乘机手续。<br /> 3、请注意身份证、护照、签证及旅客证件应随身携带，不要放在托运行李中运输。<br /> 4、具体事项以航空公司规定执行。"
        },

        { "textTitle":"安全检查" ,
        "Nounsexplain":"又称安全技术检查，是指在民用机场实施的为防止劫（炸）飞机和其他危害航空安全事件的发生，保障旅客、机组人员和飞机安全所采取的一种强制性的技术性检查。" ,
        "Area":"T2航站楼出发大厅北侧、出发大厅中、出发大厅南侧（国际出发旅客专用）" ,
        "Note":"1、您现在点击的位置处于始发大厅北侧。<br /> 2、国内出发旅客须凭借本人有效身份证件和登机牌前往相应区域接受安全检查，如证件遗失请前往国内出发大厅1号门左侧机场派出所办理临时乘机证明。<br /> 3、请旅客们自觉并配合安检人员进行检查，以便您能够快速的检查完毕后进入隔离区。<br /> 4、接受安全检查过程中，请旅客们仔细阅读安检通道上方液晶屏显示的乘机指南，不要携带全国民航公告上明确指出禁止携带的九大类危险品，以及打火机、火柴、各类道具等物品。<br /> 5、请旅客们在将行李办理托运，接受检查时，不要将锂电池以及内含锂电池的小电器（电脑、手机、照相机等等）放入包内托运，可以将该类物品取出随身携带。<br /> 6、 23~30号登机口旅客可就近选择出发大厅北侧1~6号安检通道进行安检；31~41号登机口及47~50号远机位登机口旅客可就近选择出发大厅中7~15号安检通道进行安检；国际出发旅客请在出发大厅北侧安检通道进行安检。"
        },

        { "textTitle":"自动银行柜员机" ,
        "Nounsexplain":"ATM机3台、BCM机1台、XDM机1台共5台,ATM、自助服务终端BCM、外币兑换XDM" ,
        "Area":"始发大厅两端ATM、达到外厅南端，ATM、BCM、XDM。",
        "Note":"1、您现在点击的位置处于始发大厅北侧。  <br /> 2、服务电话：0731-84798709"
        },

        { "textTitle":"行李寄存",
        "Nounsexplain":"行李寄存处有1个，如果您需要寄存物品，请到行李寄存柜台办理相关手续，可方便您安全的存取小件物品，大件行李使用货架柜寄存，可保证您的大件行李也能从容栖身。",
        "Area":"T2航站楼始发大厅C值机岛后",
        "Note":"一、行李寄存须知：<br /> 1、凭有效身份证明寄存行李；<br /> 2、旅客所存的行李物品必须经过安全检查，否则，不予寄存；<br /> 3、严禁寄存枪支、爆炸品、易燃品、毒品、腐蚀性、放射性和国家规定禁运物品；<br /> 4、免责物品（如：金、银、珠宝及饰品等），机要文件、有价证劵、现金、贵重物品、易碎物品不能放在行李内寄存。否则，发生损坏或丢失，本处不予赔偿；<br /> 5、存入易污染物品，应事先声明，否则发生损坏或污染他人物品，由寄存人照价赔偿。如食物发生腐烂、异味的，本处有权做弃掉处理；<br /> 6、寄存行李必须包装完好、捆扎牢固、箱包必须自行上锁且两件行李不能捆扎成一件寄存；<br /> 7、旅客应妥善保管寄存凭证，若丢失责任自负；<br /> 8、行李寄存期限最长不得超过30天，逾期按旅客自弃物品处理；<br /> 9、行李丢失酌情赔偿，单价行李最高赔偿额不超过人民币2000元；<br /> 10、行李存取柜台的服务时间早06:30到当日最后一个到达航班结束；<br /> 11、行李寄存不提供快递服务，敬请谅解。　<br /> 二、收费标准：<br /> 湖南省物价局【2009】155号文件标准计费，（收费截止于当日PM24:00时整）具体收费标准如下： 小型单个物件单件重量0.5公斤以内，10元/天     20CM×40CM×50CM以下（乘机标准旅行箱）5公斤以内，15元/天       20CM×40CM×50CM以上及超大单间重量5公斤以上，20-50元/天       贵重行李，油、酒、冷藏等需特殊处理行李请事先申明需缴纳额外费用。<br /> 服务电话：15874126315"
        },

        { "textTitle":"行李打包",
        "Nounsexplain":"行李打包",
        "Area":"",
        "Note":""
        },

        { "textTitle":"机场派出所",
        "Nounsexplain":"为旅客办理临时乘机证明及接警。",
        "Area":"T2航站楼始发厅北侧",
        "Note":"公安派出所接警电话:0731-84797430<br> 公安派出所办理旅客临时乘机证明电话：0731-84797445"
        }
    ];

    //定义坐标点
    var arr = [

        {x: 403, y: 306, sort: 0},


        {x: 774, y: 557, sort: 3},
        {x: 883, y: 604, sort: 3},
        {x: 1048, y: 673, sort: 3},
        {x: 1065, y: 537, sort: 3},
        {x: 1093, y: 550, sort: 3},
        {x: 1163, y: 721, sort: 3},

        {x: 192, y: 191, sort: 7},

        {x: 760, y: 549, sort: 9},
        {x: 796, y: 563, sort: 9},
        {x: 869, y: 591, sort: 9},
        {x: 903, y: 607, sort: 9},
        {x: 1034, y: 663, sort: 9},
        {x: 1069, y: 679, sort: 9},

        {x: 387, y: 258, sort: 10},
        {x: 495, y: 300, sort: 10},
        {x: 673, y: 543, sort: 10},
        {x: 892, y: 640, sort: 10},
        {x: 1018, y: 498, sort: 10},
        {x: 993, y: 670, sort: 10},
        {x: 1109, y: 591, sort: 10},
        {x: 1224, y: 774, sort: 10},
        {x: 1765, y: 849, sort: 10},

        {x: 128, y: 131, sort: 13}
    ];

    // 生成左侧面板数据
    $.each(arrSort, function(index, val) {
         $('ul.sort').append(
            "<li class='sort" +index+ "'>" +
            "<img src='images/icon/s" + index + ".png' class='picture'>" +
            "<h2>" + val.textTitle +"</h2>" +
            "</li>"
            );
    });

    // 放置位置点的集合
    var container_dots = container.append("g").attr("class", "dots");


    // 所有点定义
    $.each(arr, function(index, val) {

        var container_ci = container_dots.append("g")
            .attr("class", "ci sort"+val.sort);

        // 负值绝对值越大 越向下
        var offset_x = 0, offset_y = 0;
        var RECT_W = 20,RECT_H = 42;

        // 定位小园点
        container_ci.append("circle").attr("cx", val.x+offset_x).attr("cy", val.y+offset_y);

        // 坐标点上的图片

        container_ci
            .append("image")
            .attr("xlink:href", "images/icon/t"+val.sort+".png")
            .attr("id", index)
            .attr("x", val.x-RECT_W/2+offset_x )
            .attr("y", val.y-RECT_H+2+offset_y )
            .attr("width", RECT_W)
            .attr("height", RECT_H)
           ;

        // 坐标点上的点击区
        
        container_ci
            .append("rect")
            .attr("id", val.sort)
            .attr("x", val.x-RECT_W/2+offset_x)
            .attr("y", val.y-RECT_H+2+offset_y)
            .attr("width", RECT_W)
            .attr("height", RECT_H)
            .on("click", function(e) {
                var index = this.id;
                console.log(index);
                $('.pop .tit').text( arrSort[index].textTitle );
                $('.pop .Nounsexplain').html( arrSort[index].Nounsexplain );
                $('.pop .Area').html( arrSort[index].Area );
                $('.pop .Note').html( arrSort[index].Note );
                $('.pop .picture').html( "<img src='images/icon/pic"+index+".jpg'/>" );

                $('.pop').slideDown('200');
            })
            .on("mouseover", function(e) {
                TweenMax.to($(this).prev(), .1, {
                    y: "-=8",
                    repeat: 5,
                    yoyo: true
                });
            })
            .on("mouseout", function(e) {
                TweenMax.to($(this).prev(), .1, {y: "0"});
            }) ;
    });

    // 将画布调整到起始比率
    zoom.scale(ratio_init);
    zoom.event(_svg.transition().duration(200));


    function dottype(d) {
        d.x = +d.x;
        d.y = +d.y;
        d.id = +d.id;
        return d;
    }

    function zoomed() {
        $('.tip i').text((d3.event.scale).toFixed(2));
        container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    function dragstarted(d) {
        d3.event.sourceEvent.stopPropagation();
        d3.select(this).classed("dragging", true);
    }

    function dragged(d) {
        d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
    }

    function dragended(d) {
        d3.select(this).classed("dragging", false);

    }

    // 分类面板
    $('.sort li').click(function(event) {
        var _li = $(this).attr("class");
        var obj = $("svg ." + _li + " image");
        TweenMax.to(obj, .1, {
            y: "+=-13",
            repeat: 5,
            yoyo: true
        });
    });

    // 分类面板收缩
    $('.side').click(function(event) {
        if($('.panel').hasClass('active'))
            {$('.panel').removeClass('active')}
        else{
            {$('.panel').addClass('active')}
        }
    });

    // 弹窗
    $('.pop i').click(function(event) {
        $('.pop').slideUp().children('span').text("");
    });

    // 右上角的比例显示
    $('.tip i').text(ratio_init.toFixed(2));

    // 变尺寸 
    var _box = $(".box1");
    $('.btn').click(function(event) {
        if( _box.hasClass('fullscreen') ){
            _box.removeClass('fullscreen');
            _w = 1200;
            _h = 600;
        }else{
            _box.addClass('fullscreen');
            _w = $(window).innerWidth();
            _h = $(window).innerHeight();
            
        }
console.log( _w+"=="+_h );
        TweenMax.to( $('.box1'),0,{width:_w,height:_h,
                onComplete:function(){
                        box_resize(_w,_h);
                    }})
    });

    function box_resize(width,height) {
        

        // 变换画布
        /*width = $("#new_flashcontent").parent().width(),
        height = $("#new_flashcontent").parent().height();*/
        ratio_init = width / 2105;
        
        // 改变画布尺寸
        TweenMax.to($('svg'),.3,{width:width,height:height});

        // 改变位移和比例
        zoom.translate([0,0]).scale(ratio_init);
        zoom.event(_svg.transition().duration(200));

    }


    </script>
</body>
